.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

.page-container {
  padding: 20px;
  background-color: #fff;
}

.sep {
  color: #999999;
}

.m20 {
  margin: 20px;
}

.mt20 {
  margin-top: 20px;
}

.mr20 {
  margin-right: 20px;
}

.mb20 {
  margin-bottom: 20px;
}

.ml10 {
  margin-left: 10px;
}

.ml20 {
  margin-left: 20px;
}

.ml30 {
  margin-left: 30px;
}

.m10 {
  margin: 10px;
}

.mt10 {
  margin-top: 10px;
}

.mr10 {
  margin-right: 10px;
}

.mb10 {
  margin-bottom: 10px;
}


.mb10 {
  margin-bottom: 10px;
}

.p20 {
  padding: 20px;
}

.pt20 {
  padding-top: 20px;
}

.pr20 {
  padding-right: 20px
}

.pb20 {
  padding-bottom: 20px;
}

.pl20 {
  padding-left: 20px;
}

.p10 {
  padding: 10px;
}

.pt10 {
  padding-top: 10px;
}

.pr10 {
  padding-right: 10px
}

.pb10 {
  padding-bottom: 10px;
}

.pl10 {
  padding-left: 10px;
}

.cursor-pointer {
  cursor: pointer;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-primary {
  color: $--color-primary;
}

.text-success {
  color: $--color-success;
}

.text-warning {
  color: $--color-warning;
}

.text-danger {
  color: $--color-danger;
}

.text-info {
  color: $--color-info;
}


.fz12 {
  font-size: $--font-size-extra-small;
}

.fz14 {
  font-size: $--font-size-base;
}

.fz16 {
  font-size: $--font-size-medium;
}

.fz18 {
  font-size: $--font-size-large;
}

.fz20 {
  font-size: $--font-size-extra-large;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.display-block {
  display: block;
}

.display-inline {
  display: inline-block;
}

.flex-box {
  display: flex;
}
